---
import { Display, Body } from '@sumup-oss/circuit-ui';
import Root from '../layouts/Root.astro';
import DocCard from '../components/DocCard.astro';

const title = 'Welcome to Circuit UI + Astro';
---

<Root title={title}>
  <Display as="h1" size="m">
    {title}
  </Display>

  <Body size="l" className="intro">
    Get started by editing <code>src/pages/index.astro</code>
  </Body>

  <div class="cards">
    <DocCard
      title="Astro"
      description="Find in-depth information about Astro features and API."
      href="https://docs.astro.build"
    />

    <DocCard
      title="Circuit UI"
      description="Discover SumUp's design system for the web."
      href="https://circuit.sumup.com"
    />

    <DocCard
      title="Foundry"
      description="Learn about SumUp's toolkit for building TypeScript applications."
      href="https://github.com/sumup-oss/foundry"
    />
  </div>
</Root>

<style>
  .intro {
    margin-top: var(--cui-spacings-peta);
    margin-bottom: var(--cui-spacings-peta);
  }

  .intro code {
    padding: var(--cui-spacings-bit) var(--cui-spacings-byte);
    font-weight: var(--cui-font-weight-bold);
    background-color: var(--cui-bg-subtle);
    border: 1px solid var(--cui-border-subtle);
    border-radius: var(--cui-border-radius-byte);
  }

  .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cui-spacings-giga);
  }

  @media (min-width: 768px) {
    .cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>
